<!DOCTYPE html>
<html>
<head>
<title>来考试啊！</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=375">
<meta name="renderer" content="webkit">
<link rel="icon" type="image/png" href="./favicon.png" />

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<script src="js/data.js"></script>
<script>
    if ( typeof(localStorage.getItem) === undefined ){
        alert("本地存储错题集无法使用！");
    } else {
        WRONGS = localStorage.getItem('xiti150-wrongs')
        WRONGS = WRONGS ? new Set(JSON.parse(WRONGS)) : new Set()
    }

    const ABCD = ['A', 'B', 'C', 'D']

    AllDATA.forEach((d, i) => d.id = i)

    document.addEventListener( "DOMContentLoaded", () => {
        let correctnub = new Set()
        let wrongnub = new Set()
        let i = 0
        let current = null
        let ans = null
        let All = []
        const $form = document.querySelector('#form')
        const $question = document.querySelector('#question')
        const $answer = document.querySelector('#answer')
        const $wrong = document.querySelector('#wrong')
        const $correct = document.querySelector('#correct')
        const $current = document.querySelector('#current')
        const $correctnub = document.querySelector('#correct-nub')
        const $wrongnub = document.querySelector('#wrong-nub')
        const $wrongs = document.querySelector('#wrongs')
        const $wrongBtn = document.getElementById('wrongs-btn')
        const $total = document.getElementById('total')
        const $back = document.getElementById('back')
        const $clear = document.getElementById('clear')
        const $difficult = document.getElementById('difficult')
        const $easy = document.getElementById('easy')

        $form.onchange = function(e) {
            const value = e.srcElement.value
            if( value === ans) {
                // removeWrong()
                // $correctnub.textContent = wrongnub.length
                // wrongnub.delete(i)
                // $wrongnub.textContent = wrongnub.size
                // $correctnub.textContent = wrongnub.size
                $wrong.style.display = 'none'
                $correct.style.display = 'block'
            } else {
                addWrong()
                // $wrongnub.textContent = wrongnub.size
                $correct.style.display = 'none'
                $answer.textContent = ans
                $wrong.style.display = 'block'
            }
        }

        $current.onchange = function(e) {
            const value = e.currentTarget.value
            value && next(value)
        }

        document.getElementById('next').onclick = () => {
            next()
        }

        $wrongBtn.onclick = () => {
            $back.style.display = 'block'
            $clear.style.display = 'block'
            $difficult.style.display = 'none'
            $easy.style.display = 'inline-block'
            start(AllDATA.filter((r, i) => WRONGS.has(i)))
        }

        $back.onclick = () => {
            $back.style.display = 'none'
            $clear.style.display = 'none'
            $easy.style.display = 'none'
            $difficult.style.display = 'inline-block'
            start(AllDATA)
        }

        $clear.onclick = () => {
            WRONGS.clear()
            localStorage.setItem('xiti150-wrongs', JSON.stringify(Array.from(WRONGS)))
            delWrong()
            start(AllDATA.filter((r, i) => WRONGS.has(i)), i)
        }

        $difficult.onclick = () => {
            addWrong()
        }

        $easy.onclick = () => {
            delWrong()
            start(AllDATA.filter((r, i) => WRONGS.has(i)), i)
        }

        function setWrongsText() {
            $wrongs.textContent = WRONGS.size
        }

        function addWrong() {
            WRONGS.add(current.id)
            localStorage.setItem('xiti150-wrongs', JSON.stringify(Array.from(WRONGS)))
            setWrongsText()
        }

        function delWrong() {
            if(!current) return
            WRONGS.delete(current.id)
            localStorage.setItem('xiti150-wrongs', JSON.stringify(Array.from(WRONGS)))
            setWrongsText()
        }

        function start(arr, i = 1) {
            Arr = arr || AllDATA
            $total.textContent = Arr.length
            next(i)
        }

        function next(p) {
            i = p ? (p - 1) : i
            if(i >= Arr.length) {
                i = 0
            } else if(i < 0) {
                i = 0
            }
            $wrong.style.display = 'none'
            $correct.style.display = 'none'
            $form.innerHTML = ''
            current = Arr[i++]
            if(!current) {
                $question.textContent = '你没错！'
                return
            }
            $question.textContent = i + '. ' + current.q
            $current.value = i
            ans = current.a
            
            const items = current.b.map( (item, i) => {
                const radio = document.createElement('input')
                radio.type = 'radio'
                radio.name = 'answer'
                radio.value = ABCD[i]
                const label = document.createElement('label')
                const span = document.createElement('span')
                span.textContent = ABCD[i] + '. ' +item
                label.append(radio)
                label.append(span)
                // return label
                
                $form.appendChild(label)
            })
        }

        setWrongsText()
        start()
        
    })
</script>
<style>
    html,body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    body {
        display: flex;
    }
    .container{
        width: 100%;
        height: calc(100% - 50px);
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        padding: 0 20px;
    }
    label {
        display: block;
        margin: 20px 10px;
        display: flex;
        align-items: center;
    }
    label input {
        margin: 0 10px 0 0;
    }
    input:checked + span{
        color: #0083ce
    }
    .el-button {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
    }
    .el-button--text {
        border-color: transparent;
        color: #409eff;
        background: transparent;
        padding-left: 0;
        padding-right: 0;
    }
    .el-button--primary {
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
    }
    .el-button--primary:focus, .el-button--primary:hover {
        background: #66b1ff;
        border-color: #66b1ff;
        color: #fff;
    }
    .el-button.is-circle {
        border-radius: 50%;
        padding: 12px;
    }
    .el-button--danger {
        color: #fff;
        background-color: #f56c6c;
        border-color: #f56c6c;
    }
    .el-button--mini.is-circle {
        padding: 7px;
    }
    #next {
        width: 100%;
        margin: 10px 0;
    }
    .answer-container {
        margin-top: 50px;
        margin-bottom: auto
    }
    #answer {
        font-size: 50px;
    }
    #wrong {
        color:crimson;
    }
    #correct {
        color: green;
    }
    .page {
        color: #999;
        font-size: 12px;
        display: flex;
        justify-content: center;
    }
    #current {
        width: 30px;
        border: none;
        background: burlywood;
        border-radius: 3px;
        text-align: center;
        margin-right: 5px;
        color: white;
    }
    header {
        border-bottom: #409eff 1px solid;
        position: fixed;
        display: flex;
        width: 100%;
        height: 40px;
        top: 0%;
        left: 0;
    }
    #correct-nub {
        color:green;
    }
    #wrong-nub {
        color:crimson;
    }
    .header-container {
        padding: 0 10px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    #wrongs-btn {
        position: relative;
        margin-right: 20px;
        margin-top: 8px;
    }
    #wrongs {
        position: absolute;
        top: -6px;
        background: crimson;
        border-radius: 50%;
        padding: 2px 4px;
        font-size: 12px;
        right: -9px;
        color: white;
    }
    .cry {
        display: inline-block;
        width: 33px;
        height: 29px;
        background: url('./image/cry.jpg') no-repeat center/contain;
    }
    #difficult {
        display: inline-block;
        width: 58px;
        height: 48px;
        background: url('./image/difficult.jpg') no-repeat center/contain;
        position: fixed;
        right: 30px;
        bottom: 200px;
    }
    #easy {
        display: none;
        width: 58px;
        height: 48px;
        background: url('./image/easy.jpg') no-repeat center/contain;
        position: fixed;
        right: 30px;
        bottom: 200px;
    }
</style>
</head>
<body>
    <header>
        <div class="header-container">
            <button id="back" type="button" class="el-button el-button--text el-button--mini" style="display: none;">
                <span>返回</span>
            </button>
            <!-- <span>答对：<span id="correct-nub"></span></span> -->
            <!-- <span>答错：<span id="wrong-nub"></span></span> -->
            <span></span>
            <button id="clear" type="button" class="el-button el-button--text el-button--mini" style="display: none;">
                <span>清空错题</span>
            </button>
            <div id="wrongs-btn" type="button" class="">
                <i class="cry"></i><b id="wrongs"></b>
            </div>
        </div>
    </header>
    <div class="container">
        <div>
            <p id="question" class="topic"></p>
        </div>
        <form id="form" class="items">
            
        </form>
        <div class="answer-container">
            <div id="wrong">答案： <span id="answer"></span></div>
            <div id="correct">
                答题正确！
            </div>
        </div>
        <div class="page">
            <input id="current" value="1"> / <span id="total"></span>
        </div>
        <button id="next" type="button" class="el-button el-button--primary">
            <span>下一题</span>
        </button>
    </div>
    <i id="difficult"></i>
    <i id="easy"></i>
</body>
</html>
